<script lang="ts">
    import { onDestroy, onMount } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";
    import { useTransition, type TransitionReturn } from "../utils/useTransition";
    import { useCarouselContext } from "./Carousel.svelte";
    import { useSwipe } from "../utils/useSwipe.svelte";

    const props = $props();
    const ctx: any = useCarouselContext();
    let item: any;
    let transition: TransitionReturn;
    let style = $state("");
    const classList = $derived(useClassList(props, "cm-carousel-item"));

    $effect(() => {
        const store = ctx.getStore();
        const activeKey = store.activeKey;
        const prevKey = store.prevKey;
        const nextKey = store.nextKey;

        const obj: any = {
            width: typeof ctx?.itemsPerView === "number" ? `${(1 / ctx?.itemsPerView) * 100}%` : "",
        };

        if (ctx?.effectName() === "card") {
            if (activeKey === props.data.id) {
                Object.assign(obj, {
                    width: "60%",
                    opacity: 1,
                    "z-index": 1,
                    transform: "translateX(-50%) translateZ(0)",
                });
            } else if (prevKey === props.data.id) {
                Object.assign(obj, {
                    width: "60%",
                    opacity: 0.4,
                    transform: "translateX(-100%) translateZ(-200px)",
                });
            } else if (nextKey === props.data.id) {
                Object.assign(obj, {
                    width: "60%",
                    opacity: 0.4,
                    transform: "translateX(0%) translateZ(-200px)",
                });
            } else {
                Object.assign(obj, {
                    width: "50%",
                    opacity: 0,
                    transform: "translateX(-50%) translateZ(-400px)",
                });
            }
        }

        style = useStyle(props, obj);
    });

    onMount(() => {
        if (ctx?.draggable) {
            const swipe = useSwipe(item, {
                threshold: 10,
                onSwipe: () => {
                    ctx?.onSwipe(swipe);
                },
                onSwipeEnd: (e, direction, duration) => {
                    ctx?.onSwipeEnd(direction, duration);
                },
                onSwipeStart: () => {
                    ctx?.onSwipeStart(swipe);
                },
            });

            onDestroy(() => {
                swipe.stop();
            });
        }

        transition = useTransition({
            el: () => item,
            startClass: "cm-carousel-item-fade-start",
            activeClass: "cm-carousel-item-fade-active",
        });
    });

    $effect(() => {
        const store = ctx.getStore();
        const activeKey = store.activeKey;
        const unActiveKey = store.unActiveKey;

        if (ctx?.effectName() === "fade") {
            if (activeKey === props.data.id) {
                transition.enter();
            }
            if (unActiveKey === props.data.id) {
                transition.leave();
            }
        }
    });
</script>

<div class={classList} bind:this={item} {style}>
    {@render props.data.children?.()}
</div>
